<template>
  <div>
    <h1>App:{{ count }}</h1>
    <button @click="changeA">show</button>
    <hr />
    <Header />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  
});
</script>


<script  setup lang="ts">
import { ref } from "vue";
/* 
  ref方法:
    - 创建一个响应式数据
    - 返回一个ref对象,ref对象内部dep属性是当前数据的依赖,value属性就是当前响应式数据的值
    - 在模板中使用ref对象的时候不需要添加.value即可拿到值
    - 在setup中操作ref对象数据的时候,需要使用.value拿到值
*/
let count = ref(1);
console.log(count);
const changeA = () => {
  count.value++;
};
</script>


<style  scoped >
</style> 